<template>
	<view>
		<!-- 视频播放 -->
		<!-- <view class="banner">
			<video :src="src" 
			v-if="flag" :autoplay="flag" :muted="flag" objectFit="fill" @ended="ending" @pause="flag = !flag" controls></video>
			<view class="play" v-else>
				<image src="../../static/home/bf02.png" mode="" @click="flag = !flag"></image>
			</view>
		</view> -->
		<view class="index-body">
			 <u-tabs :list="parent_classify"  :activeStyle="{ fontWeight: '700'}" class="tabs_style" :lineWidth="40" :current="parent_index" @change="changeParent($event.index)" :lineColor="'#333333'"></u-tabs>
			<!-- 主分类框 -->
			<!-- <scroll-view class="classify-parent" :scroll-x ="true">
				<view @tap="changeParent(key)" id='parent_bar' :class="parent_index == key ? 'classify-parent-item parent-active' : 'classify-parent-item'" v-for="(item , key) in parent_classify">
					<view>{{item.name}}</view>
				</view>
				<view class="parent-bottom"  :style="'left:'+(12+ 100 * parent_index)+'upx'" ></view>
			</scroll-view> -->
			<!-- <scroll-view class="classify-parent" :scroll-x ="true" v-if="child_classify.length">
				<view @tap="changeChild(key)" :class="child_index == key ? 'classify-child-item child-active' : 'classify-child-item'" v-for="(item , key) in child_classify">{{item.name}}</view>
			</scroll-view> -->
			<u-tabs v-if="child_classify.length" :activeStyle="{ fontWeight: '700'}" :lineHeight="0" :list="child_classify" class="tabs_style" :current="child_index" @change="changeChild($event.index)" :lineColor="'#333333'"></u-tabs>
		</view>
		<view class="classify-line"></view>
		<!-- 商品列表 -->
		<view class="index-body goods-list" v-if="!loading">
			<goods-list :list="goods_list"></goods-list>
		</view>

		<!-- 遮罩层 -->
		<view class="goods-model" v-if="loading">
		</view>
		<!-- <web-load v-if="loading"></web-load> -->
	</view>
</template>

<script>
	import webLoad from '../../components/unit/loading.vue';
	import goodsList from '../../components/goods/list.vue';
	export default {
		components:{ goodsList,webLoad  },
		data() {
			return {
				loading : true,
				flag:false,
				parent_classify:[
					{name : '全部',id : 0 , children:[]},
					{name : '鞋类' , parent_id : 0 ,id : 1,children:[
						{name : '全部' , parent_id : 1 , id : 2},
						{name : '运动鞋' , parent_id : 1 , id : 2},
						{name : '平底鞋' , parent_id : 1 , id : 3}
					]} ,
					{name : '衣服' ,parent_id : 0 ,id :4,children:[
						{name : '全部' , parent_id : 4 , id : 2},
						{name : '长袖' , parent_id : 4 , id : 5},
						{name : '短袖' , parent_id : 4 , id : 6}
					]},
					{name : '配件' ,parent_id : 0 ,id :5,children:[
					]},
				],
				child_classify : [],   // 自己分类的商品名称
				parent_index : 0,  //选择父级分类 为了改变类属性
				child_index : 0,  	// 选择子级分类 为了改变类属性
				parent_classify_id : 0,  // 父级元素的id
				child_classify_id : 0,  // 子级分类的id
				page : 1,
				last_page : 1,
				goods_list : []   ,// 获得所有的商品数据
				src : '',
			}
		},
		onLoad(e) {
			// 获取传递过来的地址栏参数  赋值给父级分类的id
			this.parent_classify_id = e.parent_classify ? e.parent_classify : 0;
			this.getClassify();
		},
		onReachBottom(){
			if(this.page >= this.last_page)return this.toast('暂无更多数据~');
			this.page++;
			this.getGoods();
		},
		methods: {
			// 获取父级分类的元素宽度
				
			//默认选择
			defaultSelect(){
				for(var i in this.parent_classify){
					if(this.parent_classify[i].id == this.parent_classify_id){
						// this.parent_index = i;
						this.changeParent(i);
					}
				}
			},
		
			//获取分类数据
			getClassify(){
				this.ajax('index/indexList',{
					success:(res) => { 
						this.parent_classify = res.msg.classify;
						this.src = res.msg.src;
						this.defaultSelect(); 
					}
				})
			},
			//获取商品列表
			getGoods(){
				// console.log(this.parent_classify_id);
				this.ajax('goods/goodsList',{
					//  传递的参数   页数   父级分类id   子级分类id
					data:{page : this.page,parent_classify : this.parent_classify_id ,child_classify : this.child_classify_id},
					success:(res) => {
						this.loading =false;	
						console.log(res)
						this.page = res.msg.current_page;   // 当前页
						this.last_page = res.msg.last_page;  // 最后一页
						var data = res.msg.data;    // 商品数据
						for(var i in data) {   
							this.goods_list.push(data[i]);
						}
						console.log(this.goods_list)
					}
				})
			},
			// 视频播放结束的时候 
			ending () {
				this.flag = false;
				},
			//选择父级分类
			changeParent(key){
				this.loading = true;
				this.parent_index = Number(key);
				this.child_index = 0;
				this.child_classify = this.parent_classify[key].children;  //子分类的名称
				this.parent_classify_id = this.parent_classify[key].id;   // 父分类的id
				if(!this.parent_classify[key].id)this.child_classify_id = 0; // 如果没有父级分类  自己分类的id也为0
				else this.child_classify_id = this.child_classify[0].id;  //
				this.goods_list = []; // 商品信息
				this.page = 1;
				this.getGoods();  // 获取商品数据
			},
			//选择子级分类
			changeChild(key){
				this.loading = true;
				this.child_index = key;  // 子分类的下标
				this.child_classify_id = this.child_classify[key].id;  // 子分类的id
				this.goods_list = [];
				this.page = 1;
				this.getGoods();
			}
		}
	}
</script>

<style lang="scss">
	.goods-model{
		position: fixed;
		top:500upx;
		left:0;
		width: 100%;
		height:100%;
		background: #fff;
		z-index:9;
	}
	.banner {
		height: 421upx;
		// width: 750upx;
		background: url('../../static/home/bg01.png') no-repeat;
		background-size: 100%;
		display:flex;
		justify-content: center;
		align-items: center; 
		uni-video 	{
			height: 100%;
			width: 100%;
		}
		.play {
			image {
				width: 84upx;
				height: 84upx;
			}
		}
	}
	/deep/ .u-tabs__wrapper__nav__item__text{
		font-size: 32rpx !important;
		color: #333333;
	}
	.tabs_style{
		color: #333333;
	}
	.index-body{padding: 0 10upx;width: calc(100% - 20upx);}
	.classify-parent{
		width: calc(100% - 20upx);
		height: 70upx;
		white-space: nowrap;
		position: relative;
		// font-weight: 600;
		padding:0 10upx;
		}
	.classify-parent-item,.classify-child-item{
		display: inline-block;
		width: 100upx; 
		line-height: 70upx;
		color:#666;
		overflow: hidden;
		// text-align: center;
		}
	.parent-active{
		color:#333;
		font-weight: bold;
		font-size: 32upx;
		// position: relative;
	}
	#parent_bar{
		// display: flex;
		// flex-direction: column;
		// justify-content: space-around;
		// align-items: center;
	}
	.parent-bottom{
		position: absolute;
		bottom:0;
		// transform: translate(-50%,0);
		width:40upx;
		background: #333333;
		height: 6upx;
		transition: all 0.1s linear;}
	.classify-child-item{color:#999;width: auto;padding-right:40upx}
	.child-active{color:#333;}
	.classify-line{width: 100%;height: 1upx;background: #f0f0f0;margin:10upx 0;}
</style>
